<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/nav.css">
    <title>导航栏</title>
</head>

<body>
    <div class="nav">
        <div class="nav-wrap">
            <div class="nav-list">
                <div class="nav-list-item active">
                    <div>官网首页</div>
                    <span>HOME</span>
                </div>
                <div class="nav-list-item">
                    <div>作战资讯</div>
                    <span>NEWS</span>
                </div>
                <div class="nav-list-item">
                    <div>女武神</div>
                    <span>VALKYRIES</span>
                </div>
                <div class="nav-list-item">
                    <div>动画壁纸</div>
                    <span>WALLPAPERS</span>
                </div>
                <div class="nav-list-item">
                    <div>周边商城</div>
                    <span>MERCH</span>
                </div>
                <div class="nav-list-item">
                    <div>官方社区</div>
                    <span>FORUM</span>
                </div>
            </div>
            <div class="nav-ft">
                <a href="https://jiazhang.mihoyo.com" target="_blank" class="nav-ft-item">
                    <div>成长关爱系统</div>
                    <span>PROGRESS</span>
                </a>
                <a href="https://user.mihoyo.com" target="_blank" class="nav-ft-item">
                    <div>米哈游通行证</div>
                    <span>miHoYo PASS</span>
                </a>
            </div>
        </div>
    </div>
</body>

</html>